<template>
	<!-- 
	swiper中的transfrom会使fixed失效,此时用height固定高度; 
	swiper中无法触发mescroll-mixins.js的onPageScroll和onReachBottom方法,只能用mescroll-uni,不能用mescroll-body
	-->
	<!-- ref动态生成: 字节跳动小程序编辑器不支持一个页面存在相同的ref (如不考虑字节跳动小程序可固定值为 ref="mescrollRef") -->
	<!-- top的高度等于悬浮菜单tabs的高度 -->
	<MescrollUni  :ref="'mescrollRef'+i" @init="mescrollInit"   :height="height" :down="downOption" @down="downCallback" :up="upOption" @up="upCallback" @emptyclick="emptyClick">
		<!-- 数据列表 -->
		<view class="ffrtghh">
			<view class="box-item"  :id="'good'+item.order_no"  v-for="item in goods" :key="item.order_no" @tap="goDetil_xcx(item)">
				<view class="item"  >
					<view class="item-top">
							 <view class="top-left">
									 <view class="left-text">
											 订单号:
									 </view>
									 <view class="left-ddh">
											 {{item.order_no}} <image src="@/static/order/fhzi.png" class="fhzi" @click.stop="handleCopy(item.order_no)"></image>
									 </view>
							 </view>
							 <view class="top-right">{{delivery[item.delivery_status]}}</view>
					</view>
					<view class="item-img">
						<image v-if="item.img" :src="item.img.file_path" class="img-left" mode="aspectFit"></image>
						<view class="img-left" v-else></view>
						<view class="img-right">
								 <view class="img-text">
										{{item.goods_name}} 
								 </view>
								 <view class="img-mun">
										 x1
								 </view>
						</view>
					</view>
					<view class="jg">
						 <view class="jg-left widd">
								 <view class="jg-item">
										 提交面值: 
								 </view>
								 <view class="item-ts">
										 {{item.order_price}}
								 </view>
						 </view>
						 <view class="jg-left">
								<view class="jg-item">
										回收折扣: 
								</view>
								<view class="item-ts">
										 {{item.recycle_discount}}%
								</view>
						 </view>
					</view>
					<view class="jg">
						 <view class="jg-left widd">
								 <view class="jg-item">
										 结算金额: 
								 </view>
								 <view class="item-ts">
										 {{item.recycle_price}}
								 </view>
						 </view>
						 <view class="jg-left" v-if="item.delivery_status === 20">
								<view class="jg-item">
										结算时间: 
								</view>
								<view class="item-ts">
										 {{item.result_date}}
								</view>
						 </view>
					</view>
				</view>
			</view>
		</view>
		<uni-popup
		    ref="uodatediscount" 
		>
		<view class="pop-center-main">
			<view class="pop-top-title">
				<view class="title">修改折扣</view>
				<!-- <image src="@/static/home/cha.png" @click="closeDis"></image> -->
			</view>
			<view class="pop_orage">
				折扣区间为{{discounList.minimum_discount}}~{{discounList.discount}}
			</view>
			<view class="pop_input">
				<input :placeholder="'请输入'+discounList.minimum_discount + '~' + discounList.discount" @input="textInput" type="digit" v-model="discount"/>
			</view>
			<view class="pop-center-button mt44" @click="postOrderDiscount">
					确认提交
			</view>
		</view>
		</uni-popup>
	</MescrollUni>

</template>

<script>

	
	import MescrollMixin from "@/components/lccg/mescroll-uni/components/mescroll-uni/mescroll-mixins.js";
	import MescrollMoreItemMixin from "@/components/lccg/mescroll-uni/components/mescroll-uni/mixins/mescroll-more-item.js";
	import MescrollUni from '@/components/lccg/mescroll-uni/components/mescroll-uni/mescroll-uni.vue'
	import * as orderApi from '@/api/order'
	import * as Api from '@/api/user'
	export default {
		mixins: [MescrollMixin,MescrollMoreItemMixin], // 注意此处还需使用MescrollMoreItemMixin (必须写在MescrollMixin后面)
		data() {
			return {
				downOption:{
					auto:false // 不自动加载 (mixin已处理第一个tab触发downCallback)
				},
				upOption:{
					auto:false, // 不自动加载
					// page: {
					// 	num: 0, // 当前页码,默认0,回调之前会加1,即callback(page)会从1开始
					// 	size: 10 // 每页数据的数量
					// },
					noMoreSize: 4, //如果列表已无数据,可设置列表的总数量要大于半页才显示无更多数据;避免列表数据过少(比如只有一条数据),显示无更多数据会不好看; 默认5
					empty:{
						tip: '~ 空空如也 ~', // 提示
						btnText: '去看看'
					}
				},
				goods: [] ,//列表数据
				options: [{
					value: 11,
					label: '全部'
				}, {
					value: 12,
					label: '处理中'
				}, {
					value: 13,
					label: '待结算'
				}, {
					value: 14,
					label: '成功'
				}, {
					value: 15,
					label: '失败'
				}],
				delivery: {
					'10': '处理中',
					"20": "待结算",
					"30": "成功",
					"40": "失败",
					"50": "待处理",
					"60": "异常订单",
				},
				searchDetail:{
					data:["",""],
					keyworld:""
				},
				discount:"",
				discountPlac:"请输入折扣95.1~98.1",
				discounList:{

				},
				order_goods_id:""
			}
		},
		props:{
			i: Number, // 每个tab页的专属下标 (除了支付宝小程序必须在这里定义, 其他平台都可不用写, 因为已在MescrollMoreItemMixin定义)
			index: { // 当前tab的下标 (除了支付宝小程序必须在这里定义, 其他平台都可不用写, 因为已在MescrollMoreItemMixin定义)
				type: Number,
				default(){
					return 0
				}
			},
			tabs: { // 为了请求数据,演示用,可根据自己的项目判断是否要传
				type: Array,
				default(){
					return []
				}
			},
			height: [Number,String] // mescroll的高度
		},
		components:{
			MescrollUni
		},
		methods: {
			comTime(create_time,last_time,item){
				let order_no = create_time.split('|')[0]
				let time = Number(create_time.split('|')[1]);
				if(order_no != item.order_no){
					return true
				}
				if(Math.floor(Math.abs(last_time - time)) >= 3600){
					uni.removeStorageSync('surveyStatus')
					return true
				}else{
					return false
				}
			},
			openSurvey(item){
				let token = uni.getStorageSync("AccessToken")
				Api.approvalStatus({
					order_id:item.order_no,
					token
				})
				.then(result => {
					if(result.code === 1){
						uni.navigateTo({
							url:`/pageace_ali/pages/cart/error?detail=${JSON.stringify(item)}&type=${result.data.status}&ranl=${JSON.stringify(result.data)}`
						})
					}else{
						let create_time = uni.getStorageSync('surveyStatus')
						let last_time = Date.parse(new Date()) / 1000
						if(!create_time){
							uni.navigateTo({
								url:`/pageace_ali/pages/cart/survey?detail=${JSON.stringify(item)}`
							})
						}else{
							if(this.comTime(create_time,last_time,item)){
								uni.navigateTo({
									url:`/pageace_ali/pages/cart/survey?detail=${JSON.stringify(item)}`
								})
							}else{
								uni.navigateTo({
									url:`/pageace_ali/pages/cart/error?detail=${JSON.stringify(item)}&type=4`
								})
							}
						}
					}
				})

			},
			recurOrder(item){
				uni.navigateTo({
					url:"/pages/search/index?search="+ item.goods_name
				})
			},
			handleCopy(data) {
				uni.setClipboardData({
					data,
					success: () => {
						this.$toast('复制成功')
					}
				})
			},
			textInput(){
				let _this = this
				if(this.discount){
					
					if(Number(this.discounList.minimum_discount)<=Number(this.discount)){
						if(Number(this.discount) <= Number(this.discounList.discount)){
							
						}else{
							_this.$toast("请输入的折扣小于最大折扣")
							return
						}
					}else{
						_this.$toast("请输入的折扣大于最低折扣")
						return
					}
				}
			},
			postOrderDiscount(){
				let _this = this
				let token = uni.getStorageSync("AccessToken")
				if(this.discount){
					
					if(Number(this.discounList.minimum_discount)<=Number(this.discount)){
						if(Number(this.discount) <= Number(this.discounList.discount)){
							
						}else{
							_this.$toast("请输入的折扣小于最大折扣")
							return
						}
					}else{
						_this.$toast("请输入的折扣大于最低折扣")
						return
					}
				}
				orderApi.floating_update({
					wxapp_id: _this.$wxapp_id,
					token:    token,
					discount:this.discount,
					order_goods_id:this.order_goods_id
				}).then(result => {
					_this.$toast(result.msg)
					if(result.code === 1){
						this.goods = []; // 先清空列表,显示加载进度
						this.mescroll.resetUpScroll();
					}
					this.closeDis()
				})
			},
			updateDis(item){
				this.order_goods_id = item.order_goods_id
				this.discounList = item.modify_discount
				this.$refs.uodatediscount.open('center')
			},
			closeDis(){
				this.$refs.uodatediscount.close()
			},
			overflow(str) {
			
				if (str.length >= 20) {
					return str.substr(0, 18) + '....'
				} else {
					return str
				}
			},
			// 卡密展示方法
			pass_c(e) {
				if (e) {
					let str = ''
					for (let i = 0; i < e.length; i++) {
						str += '*'
					}
					return str
				} else {
					return ""
				}
			},
			goDetil_xcx(list){
				uni.navigateTo({
					url:`/pages/crder/crderitem?orderId=${list.order_no}`
				})
			},
			doSearch(word){
				this.searchDetail = word
				this.goods = []; // 先清空列表,显示加载进度
				this.mescroll.resetUpScroll();
				this.$emit("closeSearch")
			},
			/*下拉刷新的回调 */
			downCallback() {
				// 这里加载你想下拉刷新的数据, 比如刷新轮播数据
				// loadSwiper();
				// 下拉刷新的回调,默认重置上拉加载列表为第一页 (自动执行 page.num=1, 再触发upCallback方法 )
				this.mescroll.resetUpScroll()
			},
			/*上拉加载的回调: 其中page.num:当前页 从1开始, page.size:每页数据条数,默认10 */
			upCallback(page) {
				//联网加载数据
				let _this = this;
				let token = uni.getStorageSync("AccessToken")
				let keyword = this.tabs[this.i].name
				let keytype = 11
				for(let i=0;i<this.options.length;i++){
					if(keyword === this.options[i].label){
						keytype = this.options[i].value
					}
				}
				orderApi.orderList({
					wxapp_id: _this.$wxapp_id,
					type: keytype,
					page: page.num,
					start_time: this.searchDetail.data[0],
					end_time: this.searchDetail.data[1],
					name: this.searchDetail.keyworld,
					// category_name: this.card_type
				}).then(res=> {
					if(res.code === 1){
						this.mescroll.endSuccess(res.data.data.length);
						//设置列表数据
						if(page.num == 1) this.goods = []; //如果是第一页需手动制空列表
						this.goods=this.goods.concat(res.data.data); //追加新数据
					}else{
						
						// this.mescroll.resetUpScroll()
					}

				})
				// apiGoods(page.num, page.size, keyword).then(res=>{
				// 	//联网成功的回调,隐藏下拉刷新和上拉加载的状态;
				// 	this.mescroll.endSuccess(res.list.length);
				// 	//设置列表数据
				// 	if(page.num == 1) this.goods = []; //如果是第一页需手动制空列表
				// 	this.goods=this.goods.concat(res.list); //追加新数据
				// }).catch(()=>{
				// 	//联网失败, 结束加载
				// 	this.mescroll.endErr();
				// })
			},
			//点击空布局按钮的回调
			emptyClick(){
				uni.showToast({
					title:'点击了按钮,具体逻辑自行实现'
				})
			}
		}
	}
</script>
<style lang="scss">
.ffrtghh{
	padding-top: 40rpx;
}

.fhzi{
    margin-left: 5rpx;
    width: 20rpx;
    height: 24rpx;
}

.content{
    margin: 20rpx 0;
	width: 100%;
}
.content .box{
	height: 40rpx;
	display: flex;
	justify-content: space-around;
}
.content .title{
	font-family: PingFang SC, PingFang SC;
	font-weight: 400;
	font-size: 28rpx;
	color: #737373;
	text-align: left;
      line-height: 35rpx;
	font-style: normal;
	text-transform: none;
    
}
.content .title1{
      transition: all 0.2s ;
	font-family: PingFang SC, PingFang SC;
	font-weight: 600;
	font-size: 28rpx;
	color: #333333;
	text-align: left;
	font-style: normal;
	text-transform: none;
    position: relative;
    line-height: 35rpx;
   border-bottom: 2px solid #FF7544;
    transition:all  0.2s ;
}
.box-item + .box-item{
	margin-top: 40rpx;
}
.box-item{
    margin:0 32rpx;
    background: #FCFDFD;
    box-shadow: 0rpx 8rpx 40rpx 0rpx #E8EBEE;
    border-radius: 0rpx 0rpx 0rpx 0rpx;
    border: 4rpx solid #FFFFFF;
    padding: 32rpx;
    .item{
        .item-top{
            margin-bottom: 10rpx;
            display: flex;
            justify-content: space-between;
            .top-left{
                display: flex;
                .left-text{
                    font-family: PingFang SC, PingFang SC;
                    font-weight: 400;
                    font-size: 28rpx;
                    color: #737373;
                    line-height: 33rpx;
                    text-align: center;
                    font-style: normal;
                    text-transform: none;
                }
                .left-ddh{
                    margin-left: 5rpx;
                    font-weight: 400;
                    font-size: 26rpx;
                    color: #333333;
                    line-height: 33rpx;
                    text-align: center;
                    font-style: normal;
                    text-transform: none;
                }
            }
            .top-right{
                font-family: PingFang SC, PingFang SC;
                font-weight: 600;
                font-size: 28rpx;
                color: #9C8446;
                line-height: 33rpx;
                text-align: center;
                font-style: normal;
                text-transform: none;
            }
        }
        .item-img{
            display: flex;
            padding-bottom: 20rpx;
            border-bottom: 1rpx solid #EEEEEE;
            .img-left{
                   margin-right: 10rpx;
                width: 108rpx;
                height: 108rpx;
                background: #F2F7FA;
                border-radius: 8rpx 8rpx 8rpx 8rpx;
            }
            .img-right{
               .img-text{
                   margin-top: 10rpx;
                   font-family: PingFang SC, PingFang SC;
                   font-weight: 600;
                   font-size: 28rpx;
                   color: #333333;
                   line-height: 44rpx;
                   text-align: left;
                   font-style: normal;
                   text-transform: none;
               } 
               .img-mun{
                   font-family: PingFang SC, PingFang SC;
                   font-weight: 500;
                   font-size: 24rpx;
                   color: #737373;
                   line-height: 44rpx;
                   text-align: left;
                   font-style: normal;
                   text-transform: none;
               }
            }
        }
   .jg{
         margin-top: 20rpx;
       display: flex;
			 justify-content: space-between;
       .widd{
           // width: 400rpx;
					 flex: 1;
       }
       .jg-left{
           display: flex;
           .jg-item{
               height: 44rpx;
               font-family: PingFang SC, PingFang SC;
               font-weight: 400;
               font-size: 26rpx;
               color: #737373;
               line-height: 44rpx;
               text-align: left;
               font-style: normal;
               text-transform: none;
           }
           .item-ts{
               font-family: PingFang SC, PingFang SC;
               font-weight: 400;
               font-size: 26rpx;
               color: #333333;
               line-height: 44rpx;
               text-align: left;
               font-style: normal;
               text-transform: none;
           }
       }
   }
   .js-time{
       margin-top: 10rpx;
       display: flex;
       .jg-item{
           height: 44rpx;
           font-family: PingFang SC, PingFang SC;
           font-weight: 400;
           font-size: 26rpx;
           color: #737373;
           line-height: 44rpx;
           text-align: left;
           font-style: normal;
           text-transform: none;
       }
       .item-ts{
           font-family: PingFang SC, PingFang SC;
           font-weight: 400;
           font-size: 26rpx;
           color: #333333;
           line-height: 44rpx;
           text-align: left;
           font-style: normal;
           text-transform: none;
       }
   }
    }
}
</style>
